<template>
  <div id="pic"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      array: []
    }
  },
  props: ['allCart'],
  watch: {
    allCart: function (newVal, oldVal) {
      this.array = newVal
      this.renderline()
    }
  },
  methods: {
    renderline() {
      const myPieChart = echarts.init(document.getElementById('pic'))
      const data = this.array
      const pieitem = {
        // 颜色设置
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        // 鼠标移入的提示
        tooltip: {
          // trigger是触发方式（item每一项；axis轴）
          trigger: 'item',
          // 自定义提示内容
          // {a} 表示series中的name值
          // {b} 表示series中的data中的name
          // {c} 表示series中的data中的value
          // {d} 表示series中 当前的值 / 所有值的和
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // series 是图表及使用的数据
        series: [
          {
            name: '占有率',
            // type表示图表的类型（pie饼图；line折线图；bar柱状图）
            type: 'pie',
            // 饼图图形上的文本标签
            label: {
              show: true,
              color: '#1fabcf',
              fontSize: 10
            },
            // 视觉引导线
            labelLine: {
              length: 11, // 连接图形的线
              length2: 15 // 连接文字的线
            },
            // 饼图的半径
            radius: ['10%', '70%'],
            // 中心点坐标
            center: ['50%', '40%'],
            // 展示数据的模式 （area面积模式；radius半径模式）
            roseType: 'radius',
            // data就是图表中使用的数据
            data: data
          }
        ]
      }

      myPieChart.setOption(pieitem)
    }
  }
}
</script>
<style lang="less" scoped>
#pic {
  width: 100%;
  height: 100%;
}
</style>
